import { motion } from 'framer-motion';
import { useNavigate } from 'react-router-dom';

const LandingPage = () => {
  const navigate = useNavigate();
  
  const personalStatement = "我是一名对技术充满热情的初级前端开发工程师，拥有两年的Web开发经验，专注于使用React和Vue构建用户友好的交互式界面。我热衷于将设计师的创意精准地转化为高性能的网页应用，并不断学习前沿技术以提升自己。我是一个积极主动的问题解决者，期待能加入一个富有挑战和创造力的团队。";

  return (
    <div className="min-h-screen flex flex-col items-center justify-center relative z-10 px-6">
      {/* Personal Statement */}
      <motion.div 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1.2, ease: "easeOut" }}
        className="max-w-2xl text-center mb-16"
      >
        <p className="text-[clamp(1.5rem,5vw,2.5rem)] font-light text-gray-100 leading-relaxed">
          {personalStatement}
        </p>
      </motion.div>
      
      {/* Enter Resume Button */}
      <motion.button
        initial={{ opacity: 0, y: 20 }}
        animate={{ 
          opacity: 1, 
          y: 0,
          transition: { delay: 0.5, duration: 1 }
        }}
        whileHover={{ 
          y: -5,
          boxShadow: "0 0 25px rgba(255, 255, 255, 0.5)"
        }}
        whileTap={{ y: 0 }}
        onClick={() => navigate('/resume')}
        className="absolute bottom-12 flex flex-col items-center text-gray-100"
      >
        <span className="mb-2 text-lg font-medium">进入简历</span>
        <motion.i 
          className="fa-solid fa-chevron-down animate-bounce"
          style={{ fontSize: '1.5rem' }}
        />
      </motion.button>
    </div>
  );
};

export default LandingPage;